<template>
	<view class="container">
		<!-- 此处改动, userifo-supplement 为新添加文件-->
		<!-- 个人信息补充 -->
		<view class="zanwei"></view>
		<view class="skip">
			<view class="skip-block"></view>
			<view class="skip-btn" @click="ship_btn()"><text>跳过</text> </view>
		</view>
		<view class="">
			<view class="test">让我更了解你</view>
			<view class="test2">完善信息直接影响任务的匹配</view>
			<view class="test3">换一个你的形象</view>
		</view>
		<!-- 头像 -->
		<view class="head-portrait"  @click="touxiangClick">
			<!-- <canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d"  /> -->
			
			<image :src="image" class="image1" mode="aspectFill"></image>
		</view>
<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d"  style="width: 0px; height: 0px;"/>
		<view class="foot-user">
			<view class="or-gender">请选择你的性别</view>
			<view class="Gender">
				<view class="nan gender" @click="genderClick(0)" :class="or_gender==0 ? 'nan-bg':''">
					<view class="gender-ctn">
						<text >男</text>
						<image :src="or_gender==0 ? '../../static/userifo-supplement/nan.png':'../../static/userifo-supplement/nan2x.png'" mode="aspectFill" class="image"></image>
					</view>
				</view>
				<view class="nv gender"  @click="genderClick(1)" :class="or_gender==1 ? 'nv-bg':''">
					<view class="gender-ctn">
						<text>女</text>
						<image :src="or_gender==1 ? '../../static/userifo-supplement/nv.png':'../../static/userifo-supplement/nv2x.png'" mode="aspectFill" class="image"></image>
					</view>
				</view>
			</view>
			<!-- <view class="appellation">
				<view class="name">怎么称呼你</view>
				<view class="appellation-name">
					<input type="text" value="" placeholder="填写姓名" v-model="name" />
					<view class="separate"></view>
					<text>{{gender}}</text>
				</view>
			</view> -->
		</view>
		<view class="" style="padding: 120rpx  0 0 0 ;" @click="OpenLG">
			<view class="zlg-btn " :class=" bgcolor ? 'zlg-btn-bg':'' ">进入蜜蜂日结</view>
		</view>
	</view>
		
</template>
	
<script>
	var _this = this
	import {
		putb64
	} from '@/libs/unit.js'
	export default {
		data(){
			return{
				gender:"性别",//性别
				or_gender:'3'	,//0男
				image:"",//头像
				imgHide:true,
				name:"",
				bgcolor:false,
				avatar: '',
				uploadToken:'',
			}
		},
		methods:{
			// 跳过
			ship_btn(){
				uni.switchTab({
					url:"/pages/index/index",
				})
			},
			// 头像
			touxiangClick(){
				uni.navigateTo({
					url:"/pages/camera/idphoto/idphoto",
					animationType: 'fade-in',
					animationDuration: 100
				})
			},
			// 选择性别
			genderClick(i){
				if(i==0){
					this.or_gender=0
					this.gender="先生"
				}else{
					this.or_gender=1
					this.gender="女士"
				}
			},
			// 进入零工
			OpenLG(){
				if(this.image == '') return uni.showToast({ title: '头像不能为空~', icon: 'none' })
				if(this.gender == '性别') return uni.showToast({ title: '请选择性别~', icon: 'none' })
				// if(this.name == '') return uni.showToast({ title: '请填写姓名~', icon: 'none' })
				// let reg = /[\u4e00-\u9fa5]/
				// if (!reg.test(this.name)) return uni.showToast({ title: '姓名不能包含数字和字符~', icon: 'none' })
				 this.uploadImgs(this.image)
				if (this.image != '' && this.gender != '性别') {
					this.a()
					// 新增修改 106-109
					uni.setStorageSync("pics", this.image)
					uni.switchTab({
						url: '/pages/index/index'
					})
				}else{
					return uni.showToast({ title: '请确认是否填写完整~', icon: 'none' })
					
				}
				
			},
			// 顺序依次执行
			async  a (){
				await this.uploadImgs(this.image)
				// await this.upd_user()
				await this.getuserIfor()
			},
			// 获取七牛上传TOKEN
			async getUploadToken() {
				let res5 = await this.$fetch(this.$api.get_qiniu_token, {}, 'POST')
				uni.setStorageSync('uploadToken', res5.msg)
				this.uploadToken = uni.getStorageSync('uploadToken')
			},
			// 上传图片至七牛 拍照
			 uploadImgs(base64) {
					 uni.uploadFile({
							url: this.$api.uploadPic,
							name: 'file',
							filePath: base64,
							formData: {
								token: this.uploadToken
							},
							success: ({ data }) => {
								data = JSON.parse(data)
								this.avatar = data.hash
								this.upd_user()
							}
						})
			},
			
			
			// 修改个人信息
			async upd_user(lat, lng, region) {
					let res = await this.$fetch(this.$api.upd_user, {
						adCode:uni.getStorageSync('region') ? uni.getStorageSync('region').slice(0, 6) : 330782,
						sex: this.or_gender == '0' ? '0' : '1',
						avatar:this.avatar
					}, 'POST')
			},
			// 获取用户信息
			async getuserIfor(){
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				console.log(res,"获取用户信息");
				if (res.code===531) {
					uni.navigateTo({
						url: '/pages/riskControl/riskControl',
					})
					return
				}
				if(res.data.payPwdFlag){
					uni.setStorageSync('isHavePayPassword',true)
				}
				else{
					uni.setStorageSync('isHavePayPassword',false)
				}
			},
			updateUserImage(e) {
				// console.log(e, "eeeeeeeeeeeeeeeeeeeeeeeee");
				uni.setStorageSync("userInfo.user.avatarto",e)
				this.zjzClipper(e)
			
			},
			//证件照裁切
			zjzClipper(path) {
				uni.getImageInfo({
					src: path,
					success: function(image) {
						//因为nvue页面使用canvas比较麻烦，所以在此页面上处理图片
						let ctx = uni.createCanvasContext('canvas-clipper', _this);
						console.log('ghjghhgh1111',image);
						ctx.drawImage(
							path,
						    0,
							0,
							parseInt(1 * image.width),
							parseInt(1 * image.width),
							0,
							0,
							750,
							750
						);
						ctx.draw(false, () => {
							let that = this
							uni.canvasToTempFilePath(
								{
									destWidth: 750,
									destHeight: 750,
									canvasId: 'canvas-clipper',
									fileType: 'jpg',
									success: function(res) {
										// console.log(res);
										that.image=res.tempFilePath;
										// console.log('11111111',that.image)
										
									}
								},
								_this
							);
						});
						
					}
				});
			},
			
		},
		updated() {
			if (this.image != '' && this.gender != '性别') {
				this.bgcolor = true
			}
		},
		onLoad() {
			this.getUploadToken()
		},
		onShow(){
			this.image=uni.getStorageSync("idphoto")
		
			
		},
	
		
	}
	
</script>

<style scoped lang="less">
	.zanwei{
		width: 100vw;
		height: 88rpx;
		position: fixed;
		top: 0;
		background: #FFFFFF;
	}
	.container{
		height: 100vh;
		margin-top: 88rpx;
		background: #FFFFFF;
		&>.skip{
			height: 88rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			view{display: inline-block;}
			.skip-block{
				// width: 636rpx;
			}
			.skip-btn{
				// margin: 22rpx 0;
				width: 110rpx;
				height: 44rpx;
				border: 1px solid #999;
				border-radius: 12rpx;
				margin-right: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				&>text{
					// width: 46rpx;
					// height: 23rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999;
					// margin: 11rpx 19rpx;
				}
			}
		}
		&>view{
			&>.test{
				text-align: center;
				margin: 40rpx auto;
				width: 332rpx;
				height: 53rpx;
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			&>.test2{
				margin: auto;
				width: 418rpx;
				height: 27rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ABABAB;
				text-align: center;
			}
			&>.test3{
				width: 195rpx;
				height: 26rpx;
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin: 120rpx auto 36rpx ;
				

			}
		}
		&>.head-portrait{
			margin: auto;
			width: 200rpx;
			height: 200rpx;
			background-color: #F4F4F4;
			background-image:url(../../static/userifo-supplement/paishe2x.png);
			background-size: 80rpx 80rpx;
			background-position: 60rpx 60rpx;
			background-repeat: no-repeat;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			&>.image1{
				width: 200rpx;
				height: 200rpx;
			}
		}
		&>.foot-user{
			&>.or-gender{
				width: 193rpx;
				height: 26rpx;
				font-size: 27.5rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin:120rpx auto 36rpx;
			}
			&>.Gender{
				.nan{
					margin: 0 80rpx 0 155rpx;
				}
				
				.gender{
					display: inline-block;
					width: 182rpx;
					height: 82rpx;
					border-radius: 12rpx;
					background: #F2F2F2;
					.gender-ctn{
						margin: 20rpx 57rpx;
						
					}
					.image{
						vertical-align:middle ;
						width: 32rpx;
						height: 32rpx;
						padding-left: 10rpx;
					}
					text{
						display: inline-block;
						width: 27rpx;
						height: 29rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						// color: #000000;
						
					}
				}
				&>.nan-bg{
					color: #1CAAEA !important;
					background: rgba(28, 170, 234, 0.2);
					box-sizing: border-box;
					border: 1px solid #1CAAEA;
				}
				&>.nv-bg{
					background: rgba(249, 8, 101, 0.2);
					box-sizing: border-box;
					border: 1px solid #F90865;
					color:#F90865 !important;
				}
				
			}
			&>.appellation{
				.name{
					width: 140rpx;
					height: 26rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					margin: 120rpx auto 26rpx ;
				}
				.separate{
					width: 1px;
					height: 28rpx;
					background: #ABABAB;
				}
				.appellation-name{
					width: 415rpx;
					height: 80rpx;
					background: #F2F2F2;
					border-radius: 12px;
					margin: auto;
					display: flex;
					justify-content: space-around;
					align-items: center;
					&>input{
						padding-left: 25rpx;
					}
					&>text{
						width: 80rpx;
						padding-left: 25rpx ;
						padding-right: 25rpx ;
					}
				}

			}
		}
		.zlg-btn{
			margin: auto;
			width: 690rpx;
			height: 88rpx;
			
			border-radius: 12rpx;
			line-height: 88rpx;
			text-align: center;
			background: #ABABAB;
			color: #FFFFFF;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}
		.zlg-btn-bg{
			background: #FCC928;
			color: #402110;
		}
	}
	
</style>
